<template>
  <div class="index">
    <x-header class="header" :left-options="{showBack: false}">主页</x-header>
    <div class="topHolder"></div>
    <group-title>营销人员操作</group-title>
    <grid :cols="2">
      <grid-item class="indexIcon" v-for="(item,index) in menusList" :key="index" v-if="item.auth" :link="item.path">
        <i class='iconfont' :class="[item.icon,item.color]"></i><br/>
        <div class="text" v-html="item.name"></div>
        <span v-if="notifys.allNotice > 0 && index == 'notice'" class="tips">
          <badge :text="notifys.allNotice"></badge>
        </span>
      </grid-item>
    </grid>
  </div>
</template>

<script>
  import { Badge, Grid, GridItem, GroupTitle } from 'vux'
  import {message} from "../common/util";

  export default {
    name: 'index',
    components: {
      Badge,
      Grid,
      GridItem,
      GroupTitle
    },
    data () {
      return {
        menusList:{
          'subscribeManager':{'auth':false,'name':'预订管理','path':{ path: '/subscribeManager'},'icon':'icon-yudingxinxi','color':'red'},
          'presentManager':{'auth':false,'name':'酒水赠送管理','path':{ path: '/presentManager'},'icon':'icon-zengsong2','color':'blue'},
          'notice':{'auth':false,'name':'消息通知','path':{ path: '/noticeIndex'},'icon':'icon-xiaoxitongzhi1','color':'lightBlue'},
          'customerManager':{'auth':false,'name':'客户管理','path':{ path: '/setting'},'icon':'icon-kehu','color':'orange'},
          'subscribePerformance':{'auth':false,'name':'订台业绩','path':{ path: '/subscribePerformance'},'icon':'icon-89','color':'purple'},
          'todaySubscribe':{'auth':false,'name':'今日预订列表','path':{ path: '/todaySubscribeList'},'icon':'icon-quedingyuding','color':'lightGreen'},
          'managerManager':{'auth':false,'name':'经理管理','path':{ path: '/managerManager'},'icon':'icon-jingli','color':'skyBlue'},
          'setting':{'auth':true,'name':'个人设置','path':{ path: '/setting'},'icon':'icon-kehuguanli1','color':'green'}
        }
      }
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthority
      },
      notifys(){
        return this.$store.getters.getNotify
      }
    },
    methods:{
    },
    mounted(){
      //alert( " 屏幕分辨率的高：" + window.screen.height+ "\n" + " 屏幕分辨率的宽：" + window.screen.width);
      console.log('用户权限：',this.authority)
      for (let value of this.authority.h5_saleHelper){
        if(typeof value == 'object') {
          for(var key in value) {
            //console.log(key);
            if(this.menusList[key] && value != 'subscribePerformance' && key != 'customerManager' && key != 'setting') {
              this.menusList[key].auth = true
            }
          }
        } else if(typeof value == 'string') {
          //console.log(value)
          if(this.menusList[value] && value != 'subscribePerformance' && value != 'customerManager' && value != 'setting') {
            this.menusList[value].auth = true
          }
        }
      }
      this.$store.dispatch('fetchNotify',{callback:(status)=>{}})
      this.$store.commit('updateLoadingStatus',{isLoading:false})
    }
  }
</script>

<style lang="scss" scoped>
  .index{
    .indexIcon{
      text-align: center;position: relative;
      .tips{
        position: absolute;left:6.5rem;top:1.2rem;
        .vux-badge{height:1.5rem;line-height:1.5rem;width:1.5rem;font-size:1rem;border-radius:1rem;}
      }
      .iconfont{
        font-size: 4rem;
        &.red{color:rgb(229, 28, 35);}
        &.blue{color:rgb(63, 81, 181);}
        &.lightBlue{color:rgb(0, 150, 136);}
        &.orange{color:rgb(255, 152, 0);}
        &.purple{color:rgb(255, 64, 129);}
        &.green{color:rgb(37, 155, 36);}
        &.lightGreen{color:rgb(139, 195, 74);}
        &.skyBlue{color:rgb(73, 170, 253);}
      }
    }
    .text{margin-top: 0.5rem;}
  }
</style>
